import React from "react";
import { Table, Card, Button, Tag, Space, Progress } from "antd";
import { EyeOutlined } from "@ant-design/icons";

const StudentCourses: React.FC = () => {
  const mockCourses = [
    {
      id: "1",
      name: "Web开发实践",
      teacher: "张老师",
      schedule: "周一 9:00-10:30",
      location: "A301",
      progress: 60,
      score: 85,
    },
    {
      id: "2",
      name: "操作系统",
      teacher: "李老师",
      schedule: "周三 14:00-15:30",
      location: "B202",
      progress: 45,
      score: null,
    },
    {
      id: "3",
      name: "数据结构",
      teacher: "王老师",
      schedule: "周五 10:45-12:15",
      location: "A401",
      progress: 30,
      score: 90,
    },
  ];

  const columns = [
    {
      title: "课程名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "任课教师",
      dataIndex: "teacher",
      key: "teacher",
    },
    {
      title: "上课时间",
      dataIndex: "schedule",
      key: "schedule",
    },
    {
      title: "上课地点",
      dataIndex: "location",
      key: "location",
    },
    {
      title: "学习进度",
      dataIndex: "progress",
      key: "progress",
      render: (progress: number) => (
        <Progress percent={progress} size="small" />
      ),
    },
    {
      title: "成绩",
      dataIndex: "score",
      key: "score",
      render: (score: number | null) =>
        score ? <Tag color="green">{score}分</Tag> : <Tag>未公布</Tag>,
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Space size="middle">
          <Button type="link" icon={<EyeOutlined />}>
            查看详情
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <Card title="我的课程">
        <Table columns={columns} dataSource={mockCourses} rowKey="id" />
      </Card>
    </div>
  );
};

export default StudentCourses;
